<!--
 * @Description: 审核时
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-04 09:41:21
 * @LastEditTime: 2024-03-29 11:36:09
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\costPlanManagement\costPlan\components\InformationInit\components\Approving\index.vue
-->
<template>
  <a-tabs
    v-model="key"
    @change="getTableData"
  >
    <a-tab-pane
      key="1"
      tab="三算对比分析表"
    >
      <div class="table-wrapper">
        <a-button
          type="primary"
          @click="setSecondaryAccount"
          style="margin-bottom: 10px"
        > 展示二级科目 </a-button>
        <ux-grid
          ref="table1"
          :height="height"
          show-overflow
          :tree-config="{
            children: 'children',
            expandAll: false,
            iconOpen: 'el-icon-arrow-down',
            iconClose: 'el-icon-arrow-right'
          }"
          row-id="id"
          border
          :row-height="35"
        >
          <ux-table-column
            v-for="item in columns1"
            :key="item.dataIndex"
            :field="item.dataIndex"
            :title="item.title"
            :width="item.width"
            :minWidth="item.minWidth"
            :fixed="item.fixed"
            :tree-node="item.dataIndex === 'name'"
            align="left"
          >
            <template v-slot="{ row }">
              <p :title="row[item.dataIndex]">{{ row[item.dataIndex] | setPlaceholder }}</p>
            </template>
          </ux-table-column>
        </ux-grid>
      </div>
    </a-tab-pane>
    <a-tab-pane
      key="2"
      tab="目标成本月度分解表"
    >
    <a-form-model style="margin:16px 0 0 -30px" ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="{}">
    <custom-form :formList="formList" :form="form" :is-emit="false" :editModel="editModel == 0 ? '' : ''">
      <template #fileList>
            <template v-if="editModel != 0">
              <l-table businessCode="FACE12" :uploadArrys.sync="form.fileList"></l-table>
            </template>
            <file-link v-else :fileList="form.fileList" style="margin-top: -3px"></file-link>
          </template>
      </custom-form>
      </a-form-model
      <div class="table-wrapper">
        <ux-grid
          ref="table2"
          :height="height"
          show-overflow
          :tree-config="{
            children: 'children',
            expandAll: false,
            iconOpen: 'el-icon-arrow-down',
            iconClose: 'el-icon-arrow-right'
          }"
          row-id="id"
          border
          :row-height="40"
        >
          <ux-table-column
            v-for="item in columns2"
            :key="item.dataIndex"
            :field="item.dataIndex"
            :title="item.title"
            :width="item.width"
            :minWidth="item.minWidth"
            :fixed="item.fixed"
            :tree-node="item.dataIndex === 'name'"
            align="left"
          >
            <template v-slot="{ row }">
              <p
                v-if="(row.yearMonths || []).findIndex((el) => el.key === item.dataIndex) >= 0"
                @blur="handleUpdate(row, item.dataIndex)"
              >
                {{ row.detailValues[item.dataIndex] | setPlaceholder  }}
              </p>
              <p
                v-else
                :title="row[item.dataIndex]"
              >{{ row[item.dataIndex] | setPlaceholder  }}</p>
            </template>
          </ux-table-column>
        </ux-grid>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
import { UxGrid, UxTableColumn } from 'umy-ui'
import { columns1, columns2 } from './model.js'
import { getCostPlan as queryPlan } from '@/api/businessAffairs/costAccountInit'
import { publicMixin } from './../../../public'
import { placeholder } from '../../../../../../headquartersDashboard/components/placeholderWay.js'
export default {
  name: 'Approving',
  mixins: [publicMixin], //混入文件
  components: {
    UxGrid,
    UxTableColumn
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 审批详情时projectId
    pId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 三算对比分析表表头
      columns1,
      // 表头
      columns2: this.$clone(columns2),
      // 动态表头
      activeColumns: [],
      // 表格高度
      height: 0,
      // 当前项目id
      projectId: this.$userInfo()?.currentPost?.projectId,
      // 表格key
      key: '1',
      // 表格数据
      data1: [],
      data2: [],
      // 业务id
      businessId: '',
      form:{},
      editModel:0,
    }
  },
  filters:{
    setPlaceholder(val){
      return placeholder(val)
    }
  },
  mounted() {
    this.height = this.isAudit ? 500 : document.querySelector('.table-wrapper').offsetHeight - 42
    if (!this.isAudit) {
      this.getTableData()
    }
  },
  computed:{
    formList() {
      return [
        {
          slot: true,
          keyName: 'fileList',
          label: '佐证材料',
          span: 24
        }
      ]
    }
  },
  methods: {
    //展开二级科目
    setSecondaryAccount() {
      this.getTableData(false)
    },
    //设置展示二级科目
    setSecondary(data) {
      if (data && data.length) {
        data.forEach((item) => {
          if (item.isShow) {
            this.$refs.table1.setTreeExpand(item, true)
          }
          if (item.children && item.children.length) {
            this.setSecondary(item.children)
          } else {
            item.children = null
          }
        })
      }
      return data
    },
    /**
     * @description: 获取表格数据
     * @return {void}
     */
    getTableData(flag) {
      this.$emit('update:spinning', true)
      if (this.key === '1') {
        let req = {
          projectId: this.isAudit ? this.pId : this.projectId,
          isHide: false
        }
        if (flag === false) {
          req.isShow = false
        }
        queryPlan(req)
          .then((res) => {
            if (res.code === '0') {
              this.businessId = res.data.id
              this.data1 = res.data?.trees || []
              this.reloadData(this.data1)
            }
          })
          .finally(() => {
            this.$emit('update:spinning', false)
          })
      } else {
        queryPlan({
          projectId: this.isAudit ? this.pId : this.projectId,
          isHide: true
        })
          .then((res) => {
            if (res.code === '0') {
              this.businessId = res.data.id
              this.data2 = res.data?.trees || []
              this.activeColumns = (res.data.yearMonths || []).map((el) => {
                return {
                  title: el.title,
                  width: 150,
                  dataIndex: el.key
                }
              })
              const col = this.$clone(columns2)
              const end = col.pop()
              this.columns2 = [...col, ...this.activeColumns, end]
              this.$nextTick(() => {
                this.summation(this.data2,this.activeColumns)
                this.reloadData(this.data2)
              })
            }
          })
          .finally(() => {
            this.$emit('update:spinning', false)
          })
      }
    },
    /**
     * @description: 加载数据
     * @param {array} data 表格数据
     * @return {void}
     */
    reloadData(data) {
      if (this.key === '1') {
        // 获取之前展开数据
        const expandRecords = this.$refs.table1.getTreeExpandRecords()
        // 获取之前滚动高度
        const scroll = this.$refs.table1.tableExample().getScroll()
        // 加载数据
        this.$refs.table1.reloadData(data).then(() => {
          // 数据加载完成出现之后，打开之前的展开行
          this.setSecondary(data)
          // expandRecords.forEach((row) => {
          //   this.$refs.table1.setTreeExpand(row, true)
          // })
          this.$refs.table1.pagingScrollTopLeft(scroll.scrollTop, scroll.scrollLeft)
        })
      } else {
        // 获取之前展开数据
        const expandRecords = this.$refs.table2.getTreeExpandRecords()
        // 获取之前滚动高度
        const scroll = this.$refs.table2.tableExample().getScroll()
        // 加载数据
        this.$refs.table2.reloadData(data).then(() => {
          // 数据加载完成出现之后，打开之前的展开行
          expandRecords.forEach((row) => {
            this.$refs.table2.setTreeExpand(row, true)
          })
          this.$refs.table2.pagingScrollTopLeft(scroll.scrollTop, scroll.scrollLeft)
        })
      }
    },
    /**
     * @description: 审批信息
     * @return {void}
     */
    showApprovalDetails() {
      this.$bus.$emit('showApprovalDetailsDialog', this.businessId)
    }
  }
}
</script>
<style lang="less" scoped>
.table-wrapper {
  height: 100%;
}
</style>
